const { defineConfig } = require('@vue/cli-service')
// element-plus
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// icon
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')
// 修改 base-scss
const ElementPlus = require('unplugin-element-plus/webpack')
module.exports = defineConfig({
	css: {
		loaderOptions: {
			scss: {
				// 自定义的主题文件
				additionalData: '@use "@/assets/styles/el-variables.scss" as *;',
			},
		},
	},
	transpileDependencies: true,
	// element-plus
	configureWebpack: {
		plugins: [
			// Vue组件自动按需引入   支持 src/components 其他需要配置 dirs
			// require('unplugin-vue-components/webpack')({
			// 	/* options */
			// }),
			AutoImport({
				resolvers: [
					// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
					// importStyle配置样式引入方式，自动引入修改主题色设置此属性
					ElementPlusResolver({ importStyle: 'sass' }),
					// 自动导入图标组件
					IconsResolver({
						prefix: 'i',
					}),
				],
			}),
			Components({
				resolvers: [
					// 自动导入 Element Plus 组件
					// importStyle配置样式引入方式，自动引入修改主题色设置此属性
					ElementPlusResolver({ importStyle: 'sass' }),
					// 自动注册图标组件
					IconsResolver({
						// 使用element-plus的图标库 被收录在iconify中  叫 ep
						// 其他图标库请到 https://icon-sets.iconify.design/
						enabledCollections: ['ep'],
					}),
				],
			}),
			Icons({
				autoInstall: true,
			}),
			// Loading、Message 等这种以服务的方式来调用 自动导入样式
			// 组件需要单独 引入    import { ElMessage } from 'element-plus'
			require('unplugin-element-plus/webpack')({
				// options
			}),
			// 修改 base-scss
			ElementPlus({
				useSource: true,
			}),
		],
	},
	// 修改页面 title
	chainWebpack: config => {
		// 限制图片10000b以下转换成base64，减少http请求    实践证明  已自动集成 好 10KB
		// 修改页面 title
		config.plugin('html').tap(args => {
			args[0].title = '通用后台管理系统'
			return args
		})
	},
	// 跳过检查host--这个是给webpack-dev-server开启可IP和域名访问权限-->QQ登陆
	devServer: { historyApiFallback: true, allowedHosts: 'all' },
	// dist index 白屏
	publicPath: './',
})
